<template>
  <HeadTwo :activeIndex="activeIndex"></HeadTwo>
  <el-row>
    <el-breadcrumb separator=">">
      <div style="margin-top: 15px; margin-left: 18px">
        <el-breadcrumb-item :to="{ path: '/' }" class="text-base"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item class="text-base">产品生产信息</el-breadcrumb-item>
        <el-breadcrumb-item class="text-base"
          >上传产品生产信息</el-breadcrumb-item
        >
      </div>
    </el-breadcrumb>
  </el-row>
  <el-card shadow="always" style="margin: 20px">
    <el-row :gutter="20" class="header">
      <search-bar
        :add-text="searchBarText.addText"
        :search-text="searchBarText.searchText"
        :placeholder-context="searchBarText.placeholderContext"
        @initCpInfo="init"
        @handleDialogCpValue="handleDialogCpValue"
      >
      </search-bar>
      <one-table
        :table-data="tableData"
        :options-info="cpInfo"
        @handle-dialog-cp-value="handleDialogCpValue"
        @del-cp-info="deleteCpInfo"
      ></one-table>
      <paging
        :queryForm="queryForm"
        @my-size-change="handleSizeChange"
        @my-current-change="handleCurrentChange"
      >
      </paging>
    </el-row>
  </el-card>
  <dialog-cp
    v-model="dialogVisible"
    v-if="dialogVisible"
    :dialog-cp-table-value="dialogCpTableValue"
    :dialog-cp-title="dialogCpTitle"
    :queryForm="queryForm"
    @handleConfirm="handleConfirm"
  >
  </dialog-cp>
</template>

<script setup>
import HeadTwo from "@/components/header/headTwo.vue";
import {onMounted, ref} from "vue";
import {
  addCpInfo,
  delCpInfo,
  editCpInfo,
  getAllCdmc,
  getAllCpmc, 
  upcpscInfo,
} from "@/api/apiPath/twoPart.js";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import { cpInfo } from "@/api/options/twoPart/cpInfo.js";
import { isNull } from "@/api/filters.js";
import Paging from "@/components/pagination/paging.vue";
import SearchBar from "@/components/commons/searchBar.vue";
import OneTable from "@/components/table/oneTable.vue";
import DialogCp from "@/components/dialog/two/dialogCp.vue";
import {getOptionsInfo, initTableInfo} from "@/api/methods/initInfo.js";
import {addTableInfo} from "@/api/methods/addInfo.js";
import {updateFormInfo} from "@/api/methods/updateInfo.js";
import {delTableInfo} from "@/api/methods/delInfo.js";

const activeIndex = "/cpscInfo";
const tableData = ref([]);
const dialogVisible = ref(false);
const dialogCpTitle = ref("");
const dialogCpTableValue = ref({});
const queryForm = ref({
  query: "",
  pageNum: 1,
  pageSize: 10,
  totalSize: 0,
});
const searchBarText = ref({
  addText: "新增产品生产信息",
  searchText: "搜索产品生产信息",
  placeholderContext: "请输入产品名称",
});

const init = async (query)=> {
  queryForm.value.query = query
  initTableInfo(upcpscInfo(queryForm.value), tableData, queryForm)
}

onMounted(()=> {
  init()
})
const handleDialogCpValue = (row) => {
  console.log(row);
  if (isNull(row)) {
    dialogCpTitle.value = "新增产品生产信息";
    dialogCpTableValue.value = {};
  } else {
    dialogCpTitle.value = "修改产品生产信息";
    dialogCpTableValue.value = JSON.parse(JSON.stringify(row));
  }
  dialogVisible.value = true;
};
const handleSizeChange = (pageSize)=> {
  queryForm.value.pageSize = pageSize
  queryForm.value.pageNum = 1
  init()
}
const handleCurrentChange = (pageNum)=> {
  queryForm.value.pageNum = pageNum
  init()
}

const handleConfirm = async (formValue, formRef)=> {
  formValue = ref(formValue)
  formRef.validate( async valid => {
    if (!valid) {
      ElMessage({
        message: "请填写完整！",
        type: 'warning',
        duration: 1500
      })
    } else {
      try {
        dialogCpTitle.value === '新增产品生产信息'
            ? addTableInfo(addCpInfo(), formValue, upcpscInfo(queryForm.value), tableData, queryForm)
            : updateFormInfo(editCpInfo(), formValue, upcpscInfo(queryForm.value), tableData, queryForm)
        dialogVisible.value = false
      }catch (err) {
        console.log("errorOne" + err)
        ElNotification({
          message: "请求失败~",
          type: 'error',
          duration: 1500
        })
      }
    }
  })
}
const deleteCpInfo = (row)=> {
  ElMessageBox.confirm(
      '此操作将永久删除该信息，是否继续？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        try {
          delTableInfo(delCpInfo(row.bh), tableData, queryForm, upcpscInfo(queryForm.value))
        } catch (e) {
          console.log(e)
          ElNotification({
            message: "请求失败",
            type: 'error',
            duration: 1500
          })
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除',
        })
      })
}
</script>

<style scoped>
</style>

















<!--
const initInfo = async () => {
try {
let res = await upcpscInfo(queryForm.value);
let optionCdmc = await getAllCdmc();
let optionCpmc = await getAllCpmc();
chandiName.value = optionCdmc.data;
chanpingName.value = optionCpmc.data;
tableData.value = res.data.info;
queryForm.value.totalSize = res.data.totalSize;
} catch (err) {
console.log("ErrorInitCgInfo" + err);
ElNotification({
message: "请求失败~",
type: "error",
duration: 1500,
});
}
};-->
